<template>
    <div class='dialog'>
        <div class='newAdd dialog-con addCompanyInfo'>
            <split-vertical title="新增公司信息"></split-vertical>
            <div class="info">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px"  class="demo-ruleForm"   label-position = "right">
                  <el-row>
                    <el-col :span="12">
                    <el-form-item label="公司名称" prop="companyName">
                      <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="法人代表" prop="legalPersonName">
                        <el-input v-model="ruleForm.legalPersonName" placeholder="请输入法人代表"></el-input>
                      </el-form-item>
                    </el-col>


                  </el-row>

                  <el-row>

                    <el-col :span="12">
                      <el-form-item label="开户行名称" prop="bankAccountName">
                        <el-input v-model="ruleForm.bankAccountName" placeholder="请输入开户行名称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="开户行账号" prop="bankAccountNumber">
                        <el-input v-model="ruleForm.bankAccountNumber" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入开户行账号"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="纳税号" prop="registrationCode">
                        <el-input v-model="ruleForm.registrationCode" placeholder="请输入纳税号"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="公司地址" >
                    <v-distpicker  @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" ></v-distpicker>
                  </el-form-item>
                  <el-form-item label="详细地址"  prop="companyAddress">
                    <el-input v-model="ruleForm.companyAddress" placeholder="请输入公司的详细地址"></el-input>
                  </el-form-item>


                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="客服电话">
                        <el-input v-model="ruleForm.customerServicePhone" placeholder="请输入 例如：021-2222-3333"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="公司电话" >
                        <el-input v-model="ruleForm.companyPhone" placeholder="请输入 例如：021-2022-3333"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                    <el-form-item class="btn">
                        <el-button @click="submitForm('ruleForm')" type="primary" :disabled="isCompanyBtn" size="medium">提交</el-button>
                        <el-button @click="cancel"  size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>

import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/Title"
import { regionData,CodeToText } from 'element-china-area-data'
import VDistpicker from 'v-distpicker'
export default {
    inject:['reload'],
    components:{
      SplitVertical,VDistpicker
    },
    data(){
        return{
            //省市区
            options: regionData,
            selectedOptions: [],
            //创建按钮是否显示
            isCompanyBtn:false,
            newCompany:[
                {name:'公司名称',val:'必输项'},
                {name:'法人代表',val:'必输项'},
                {name:'我司对公账户名',val:'必输项'},
                {name:'账号',val:'必输项'}
            ],
            name:'',
            imageUrl: '',
            userId:'',
            ruleForm: {
                companyName:null,//  公司名称
                legalPersonName:'',//公司法人代表
                bankAccountName:'',//开户行
                bankAccountNumber:'',//开户行账户
                registrationCode:'',
                companyPhone:null,
                customerServicePhone:null,
                companyAddress:''
            },
            rules: {

                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'change' }
                ],
                legalPersonName : [
                    { required: true, message: '请输入法人代表', trigger: 'change' }
                ],
                companyAccountName: [
                    { required: true, message: '请输入我司对公账户名', trigger: 'change' }
                ],
                bankAccountName: [
                    { required: true, message: '请输入开户行名称', trigger: 'change' }
                ],
                bankAccountNumber: [
                    { required: true, message: '请输入开户行账户', trigger: 'change' },
                    { min: 5, max: 25, message: '长度在5 到 25 个字符', trigger: 'change' }
                ],
                registrationCode: [
                      { required: true, message: '请输入纳税号', trigger: 'change' },
                      { min: 18, max: 18, message: '请输入18个字符', trigger: 'change' }
                ],
               companyAddress:[
                 { required: true, message: '请输入公司地址', trigger: 'change' }

               ]
            },
          companyProvince:'',
          companyCity:'',
          companyDistrict:''
        }
    },
    created(){
       this.userId= localStorage.get("userID")
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.confirm()
            } else {
                return false;
            }
            });
        },
        confirm(){
            let param=this.ruleForm
            param['userId']=this.userId
            param['companyProvince'] =this.companyProvince
            param['companyCity'] =this.companyCity
            param['companyDistrict'] =this.companyDistrict
            if(this.companyDistrict == null || this.companyDistrict == ''){
                this.$message.warning("请选择省市区")
            }
            let success=data=>{
                if(data.statusCode === '1'){
                    this.$message.success('添加成功')
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.statusMessage)
                }
            }
            this.api.enterpriseAdd(param,success)
        },
        cancel(){
            this.$emit('closeDialog')
        },
        cancelSupplyAdd(){
          this.$router.go(-1)
        },
        onChangeProvince(province){
          this.companyProvince=province.value
        },
        onChangeCity(city){
          this.companyCity=city.value
        },
        onChangeArea(district){
        this.companyDistrict=district.value
        this.ruleForm.companyAddress = this.companyProvince+this.companyCity+this.companyDistrict
      },
    }
}
</script>
<style lang="scss" scoped>
.addCompanyInfo{
    width:700px;
    height:500px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
        }
    }
    .el-input{
      width:99%;

    }
  .btn{
    margin-top: 10px;
    width:97%;
    text-align: right;
  }


}
</style>

